<template>
  <div class="switch" id="switch-cnt" ref="switchCtn">
    <div class="switch__circle" ref="switchCircle1"></div>
    <div class="switch__circle switch__circle--t" ref="switchCircle2"></div>
    <div class="switch__container" id="switch-c1" ref="switchC1">
      <h2 class="switch__title title">继续你的旅程</h2>
      <p class="switch__description description">要与我们保持联系，请使用您的个人信息登录。点击按钮前往登录</p>
      <button class="switch__button button switch-btn" ref="switchBtn" @click="authChange">前往登录</button>
    </div>
    <div class="switch__container is-hidden" id="switch-c2" ref="switchC2">
      <h2 class="switch__title title">开启新旅程</h2>
      <p class="switch__description description">输入您的个人详细信息，与我们一起开始旅程。点击按钮前往注册</p>
      <button class="switch__button button switch-btn" ref="switchBtn" @click="authChange">前往注册</button>
    </div>
  </div>
</template>

<script setup lang="js">
  import { ref, provide } from 'vue';
  import { useAuthFormsStore } from '@/store/authFormsStore';
  const authFormsStore = useAuthFormsStore();

  const switchCtn = ref(null);
  const switchC1 = ref(null);
  const switchC2 = ref(null);
  const switchCircle1 = ref(null);
  const switchCircle2 = ref(null);
  const switchBtn = ref(null);

  // 提供 switchBtn 引用
  provide('switchBtn', switchBtn);

  const authChange = () => {
    switchCtn.value.classList.add('is-gx');
    setTimeout(() => {
      switchCtn.value.classList.remove('is-gx');
    }, 1500);
    switchCtn.value.classList.toggle('is-txr');
    switchCircle1.value.classList.toggle('is-txr');
    switchCircle2.value.classList.toggle('is-txr');

    switchC1.value.classList.toggle('is-hidden');
    switchC2.value.classList.toggle('is-hidden');

    authFormsStore.showSignup = !authFormsStore.showSignup;
  };
</script>

<style scoped>
  *,
  *::after,
  *::before {
    box-sizing: border-box;
    user-select: none;
  }

  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 400px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9;
  }

  .switch__circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 8px 8px 12px #f0f0f0, inset -8px -8px 12px #f9f9f9;
    bottom: -60%;
    left: -60%;
    transition: 1.25s;
  }

  .switch__circle--t {
    top: -30%;
    left: 60%;
    width: 300px;
    height: 300px;
  }

  .switch__container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    width: 400px;
    padding: 50px 55px;
    transition: 1.25s;
  }

  .switch__button {
    cursor: pointer;
  }

  .switch__button:hover {
    box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
    transform: scale(0.985);
    transition: 0.25s;
  }

  .switch__button:active,
  .switch__button:focus {
    box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
    transform: scale(0.97);
    transition: 0.25s;
  }

  .button {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    margin-top: 50px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.15px;
    background-color: #4B70E2;
    color: #f9f9f9;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
    border: none;
    outline: none;
  }

  .description {
    font-size: 14px;
    letter-spacing: 0.25px;
    text-align: center;
    line-height: 1.6;
  }

  .title {
    font-size: 34px;
    font-weight: 700;
    line-height: 3;
    color: #181818;
  }

  .is-hidden {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: 1.25s;
  }

  .is-txr {
    left: calc(100% - 400px);
    transition: 1.25s;
    transform-origin: left;
  }

  .is-gx {
    animation: is-gx 1.25s;
  }

  @keyframes is-gx {

    0%,
    10%,
    100% {
      width: 400px;
    }

    30%,
    50% {
      width: 500px;
    }
  }
</style>